<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://gr-blogtools.googlecode.com/svn/tagsMaker/js/tagsMakerV01.obus.js" type="text/javascript"></script>
<title>Online HTML Editor with Preview and Tags Maker</title>
<style>
html,body{background: #252626 url(https://lh5.googleusercontent.com/-qDtRz8W31Es/UGBA7_N1IGI/AAAAAAAAABk/unPoQ70Bg30/h605/bg_grad-H1x605.jpg) top left repeat-x;}
body {position:relative;font-family:verdana;margin:0 auto;padding:10px 5px;width:987px;}
iframe {background:#F4EBE1 url(https://lh5.googleusercontent.com/-IEZXFUKYLlc/UGA9sLbAmaI/AAAAAAAAAA0/AwycCegrMLI/h500/bg_grad-H1x500.jpg) top left repeat-x;
border:1px solid #222;width:1005px;height:500px;display:block;margin:10px 0 10px -10px;width:101.6%;}
#code{border-radius:3px;background:#333;color:#fff;border:solid #111;border-width:4px;padding:5px 4px 4px 10px;display:block;width:65%;margin:0;display:block;height:208px;max-width:65%;min-width:65%;min-height:160px;float:left;}
.editor_out{float:right;width:32.5%;height:226px;background:#222 url(https://lh3.googleusercontent.com/-sNc9BpRawBs/UF4QqKzkzpI/AAAAAAAAAAc/Phc_AUeGVTM/h120/bg_grad-H1x65.gif) bottom left repeat;}
.editor_in1{width:95.5%;background:#333;padding:0 3px 3px;border:4px solid #222;border-radius:3px;margin:0;text-align:center;}
.editor_in2{color:#fff;text-align:right;padding-right:20px;}
.editor_in2 a{font:normal 12px Times New Roman, Serif;display:inline-block;padding-top:5px;color:#bbb;text-decoration:none;text-shadow:0 0 2px #000;}
.editor_in2 a:link:visited{color:#888;}
.editor_in2 a:hover{color:red;}
.gr_button{height:21px;font-size:11px;font-family:Tahoma;font-weight:400;color:#aee;text-shadow:1px 1px 1px #000;border:2px outset #555;border:2px solid #222;border-radius:3px;margin:2px 0px 0px;box-shadow:0 0 1px #eee;
background:#969ca5;background:url();background:-moz-linear-gradient(top, #969ca5 0%, #4c5056 12%, #474b51 80%, #1d262b 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#969ca5), color-stop(12%,#4c5056), color-stop(80%,#474b51), color-stop(100%,#1d262b));background:-webkit-linear-gradient(top, #969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);background:-o-linear-gradient(top, #969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);background:-ms-linear-gradient(top, #969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);cursor:hand;cursor:pointer;text-align:center;}
#gr_i_code,#gr_em_code,#gr_strong_code,#gr_b_code,#gr_span_code,#gr_div_code,#gr_p_code{color:orange;}
#gr_h1_code,#gr_h2_code,#gr_h3_code,#gr_h4_code,#gr_h5_code,#gr_h6_code{color:magenta;}
#gr_id_code,#gr_class_code{color:lime;}
#gr_ul_code,#gr_ol_code,#gr_li_code{color:beige;}
#gr_spell_code{width:44px;color:red;}
#gr_html_code,#gr_style_code,#gr_link_css_code,#gr_link_js_code,#gr_script_code{width:60px;}
#gr_b_code,#gr_i_code,#gr_p_code{width:30px;}
#gr_em_code{width:40px;}
#gr_h1_code,#gr_h2_code,#gr_h3_code,#gr_h4_code{width:36px;}
#gr_h5_code,#gr_h6_code,#gr_ul_code,#gr_ol_code,#gr_li_code{width:35px;}
#gr_pre_code{width:39px;}
#gr_code_code,#gr_form_code{width:48px;}
#gr_br_code,#gr_link_code{width:50px;}
#gr_clear_both_code{width:82px;}
#gr_img_code,#gr_ins_code,#gr_del_code{width:50px;}
#gr_nobr_code{width:47px;}
#gr_hot_code{width:46px;}
#header-wrap{height:60px;background:#888;border:4px solid #111;border-bottom:none;background:#969ca5;background:url();background:-moz-linear-gradient(top,#969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#969ca5), color-stop(12%,#4c5056), color-stop(80%,#474b51), color-stop(100%,#1d262b));background:-webkit-linear-gradient(top, #969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);background:-o-linear-gradient(top, #969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);background:-ms-linear-gradient(top, #969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);}
#header-wrap h1{font:bold 30px Times New Roman;margin:0;padding:0;color:#eee;text-align:center;padding-top:10px;text-shadow:1px 1px #fff,-1px -1px #fff,-1px 1px #fff,1px -1px #fff;}
#header-wrap h1 a{color:darkred;text-decoration:none;display:inline-block;}
#header-wrap h1 a:hover{color:red;text-decoration:none;}
a{transition:1s ease;-o-transition:1s ease;-ms-transition:1s ease;-moz-transition:1s ease;-webkit-transition:1s ease;}
button,input{transition:10ms ease;-o-transition:10ms ease;-ms-transition:10ms ease;-moz-transition:10ms ease;-webkit-transition:10ms ease;}
input:active,button:active,input:focus,button:focus{transform:scale(0.95);-o-transform:scale(0.95);-ms-transform:scale(0.95);-moz-transform:scale(0.95);-webkit-transform:scale(0.95);}
button:hover,input:hover{color:yellow;}
input:active,button:active,input:focus,button:focus{border-color:#111;border-radius:6px;box-shadow:0 0 2px #eee;}
.gr_button:active,.gr_button:focus{color:red;}
</style>

<!--[if lte IE 8]>
<style type="text/css">
#gr_cdata_code{width:66px;}
#gr_span_code,#gr_div_code{width:43px;}
#gr_pre_code{width:44px;}
#gr_code_code,#gr_form_code{width:54px;}
#gr_button_code{width:57px;}
#gr_ext_link_code{width:60px;}
#gr_css_ie_code,#gr_js_ie_code{width:52px;}
#header-wrap{background:#274b51 url(https://lh3.googleusercontent.com/-sNc9BpRawBs/UF4QqKzkzpI/AAAAAAAAAAc/Phc_AUeGVTM/h120/bg_grad-H1x65.gif) top left repeat-x;}
#header-wrap h1{filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=35, Color='#ffffff'),filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#ffffff'),filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=235, Color='#ffffff'),filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=335, Color='#ffffff');}
button,input.gr_button{background:url(https://lh6.googleusercontent.com/-sRAIiN1-voU/UF4QqlkR2ZI/AAAAAAAAAAg/M-ITbfEXmNo/h120/bg_grad-H4x23.gif) left center repeat-x;}
</style>
<![endif]-->
<!--
<script src=js/sHTMLeditorV01A.js type=text/javascript></script>-->
<script>
var InEditor = '';
function update(){
  var textarea = document.formName.textareaName;
  var preview = parent.previewframe.document; 
  if (InEditor != textarea.value){
    InEditor = textarea.value;
    preview.open();
    preview.write(InEditor);
    preview.close();
  }
  window.setTimeout(update, 300);
}
function ngloding () {
    document.getElementById('code');//document.formName.textareaName.select();
    update();
}
    window.setTimeout(ngloding, 500);
</script>

</head>

<body>

<div id="wrap">
<div id="header-wrap">
	<h1><a href="">Online HTML Editor with Preview and Tags Maker</a></h1>
</div>

<form name="formName" method="post" target="previewframe">
<!-- deleted  ngloding="update(); document.formName.textareaName.select();"-->
<div class="editor_out">
<div class="editor_in1">
		<script type="text/javascript">grHTMLtags('code');</script>
</div>
<div class="editor_in2"><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com" target="_blank">gubhugreyot - demo tutorial blogger</a></div>
</div>
<textarea id="code" name="textareaName">
<!DOCTYPE html>
<html>
<head>
        <meta content="text/html;  charset=UTF-8">
        <title>css3 Animation - gubhugreyot</title>
<style type="text/css" media="all">
body {
    font:normal 86%  Courier, Courier New, Monospace;
    padding:0;
    margin:0;
    /*  background:#eee; */
}
a {
    color:#ccc;
    text-shadow:-2px 2px #555, -2px -2px #444, 2px -2px #444, 2px 2px #444, -14px 14px 10px #444;
}
a:hover {
    color:red;
}
h1 {
    font-size:110px;
    margin:0;
    text-align:center;
    padding:0;
}
#mybox {
    position:relative;
    height:500px;
    /*  background:#aaa; */
}
.inbox {
    position:absolute;
    top:10px;
    width:250px;
    height:250px;
    border-radius:125px;
    text-align:center;
    font:bold 30px Times New Roman;
    line-height:240px;
    text-indent:-40px;
    animation:anima infinite 6s ease alternate;
    -o-animation:anima infinite 6s ease alternate;
    -ms-animation:anima infinite 6s ease alternate;
    -moz-animation:anima infinite 6s ease alternate;
    -webkit-animation:anima infinite 6s ease alternate;
}
@keyframes anima {
    0% {left:0;transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
@-o-keyframes anima {
    0% {left:0;-o-transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;-o-transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;-o-transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
@-ms-keyframes anima {
    0% {left:0;-ms-transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;-ms-transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;-ms-transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
@-moz-keyframes anima {
    0% {left:0;-moz-transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;-moz-transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;-moz-transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
@-webkit-keyframes anima {
    0% {left:0;-webkit-transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;-webkit-transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;-webkit-transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
</style>
</head>
    
<body>
    <div id="mybox">
        <h1><a href="http://gubhugreyot.blogspot.com" target="_blank">css3 <br/>Animation</a></h1>
        <div class="inbox">gubhugreyot</div>
        <div style="position:absolute;top:20px;;left:10px;font:bold 16px Arial;">demo only works in browsers that support CSS3</div>
    </div>
</body>
</html>
</textarea>
</form>
<div style="clear:both;"></div>
<iframe name="previewframe" id="previewframe" allowTransparency="true"></iframe>
</div>

</body>
</html>